<template>
  <view>
    <view
      v-if="goods.length"
      class="p-[16rpx] rounded-[16rpx] bg-[#262626] grid grid-cols-2 gap-[18rpx]">
      <view
        class="bg-[#0F0F0F] border-[4rpx] border-[#8C8C8C] p-[16rpx] rounded-[16rpx] animate__scaleIn"
        :style="{
          animationDelay: item.animationDelay,
        }"
        :class="classlist(index)"
        v-for="(item, index) in goods"
        @click="handleClick(item)"
        :key="index">
        <view
          class="w-full h-[268rpx] relative rounded-ss-[8rpx] overflow-hidden">
          <up-image
            :src="$url(item.pic)"
            width="100%"
            height="100%"
            mode="aspectFill"
            bgColor="#282828"></up-image>
          <up-image
            v-if="item.tag - 0"
            class="absolute top-0 right-0"
            :src="item.tag - 0 == 1 ? newPerson : points"
            width="112rpx"
            height="52rpx"
            bgColor="transparent"></up-image>
        </view>
        <view
          class="flex h-[144rpx] mt-[8rpx] rounded-bl-[8rpx] overflow-hidden">
          <view class="p-[16rpx] bg-[#282828] flex-1">
            <view class="text-[26rpx] text-[#BBB] line-clamp-1">{{
              item.name
            }}</view>
            <view class="h-[62rpx] w-full mt-[16rpx] text-[22rpx] relative">
              <up-image
                class="absolute top-0 left-0"
                :src="priceTag"
                width="100%"
                height="62rpx"
                bgColor="transparent"></up-image>
              <view
                v-if="type == 0"
                class="flex items-center justify-between relative z-10 h-full">
                <view
                  class="text-white font-bold flex-1 pl-[14rpx] text_shadow whitespace-nowrap">
                  ￥{{ item.price }}/抽
                </view>
                <view class="flex items-center justify-center mt-[4rpx] flex-1">
                  <view class="w-[24rpx] h-[24rpx]">
                    <up-image
                      :src="hot"
                      width="24rpx"
                      height="24rpx"
                      bgColor="transparent"></up-image>
                  </view>
                  <view class="text-[#ccc] leading-[1]">{{
                    item.hot > 999 ? "999+" : item.hot ? item.hot : 0
                  }}</view>
                </view>
              </view>
              <view
                v-if="type == 1"
                class="flex items-center justify-between relative z-10 h-full">
                <view
                  class="text-white font-bold flex-1 pl-[14rpx] text_shadow whitespace-nowrap">
                  {{ item.price }}积分/抽
                </view>
                <view class="flex items-center justify-center mt-[4rpx] flex-1">
                  <view class="w-[24rpx] h-[24rpx]">
                    <up-image
                      :src="hot"
                      width="24rpx"
                      height="24rpx"
                      bgColor="transparent"></up-image>
                  </view>
                  <view class="text-[#ccc] leading-[1]">{{
                    item.hot > 999 ? "999+" : item.hot ? item.hot : 0
                  }}</view>
                </view>
              </view>
              <view
                v-if="type == 2"
                class="flex items-center justify-between relative z-10 h-full">
                <view
                  class="text-white font-bold flex-1 pl-[14rpx] text_shadow whitespace-nowrap">
                  {{ item.point }}积分
                </view>
                <view class="flex items-center justify-center mt-[4rpx] flex-1">
                  <view class="text-[#ccc] text-[20rpx]">
                    余量{{ item.num }}个
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view
            class="w-[8rpx] h-full bg-[#1F1F1F] ml-[8rpx] flex-shrink-0"></view>
        </view>
      </view>
    </view>
    <up-empty v-else mode="list" marginTop="200rpx" />
  </view>
</template>

<script setup>
import priceTag from "@/static/images/index/priceTag.png"; //价格标签
import hot from "@/static/images/index/hot.png"; //热度
import points from "@/static/images/index/points.png"; //积分
import newPerson from "@/static/images/index/newPerson.png"; //新人

const props = defineProps({
  goods: {
    type: Array,
    default: () => [],
  },
  type: {
    type: Number,
    default: 0, // 0:默认 1: 积分赏 2: 福利屋
  },
});
const emit = defineEmits(["click"]);
const classlist = (index) => {
  return {
    "rounded-tr-none": index == 0,
    "rounded-tl-none": index == 1,
    "rounded-br-none": index == props.goods.length - 2,
    "rounded-bl-none": index == props.goods.length - 1,
  };
};
const handleClick = (item) => {
  emit("click", item);
};
</script>

<style lang="scss" scoped>
.text_shadow {
  text-shadow: 0 6rpx 2rpx #8c0011;
}
</style>
